<template>
  <div class="flex">
    <div class="container">
    <div class="infoList">
      <el-avatar :size="200" :src="serviceDetail?.logo" />
      <div class="name">{{ serviceDetail?.name }}</div>
      <div class="contact">
        <div class="label">联系人:</div>
        {{ serviceDetail?.contact }}
      </div>
    </div>
  </div>
  <div class="introduction">
    <div class="card">
      <div class="title">机构资料</div>
      <div class="content">
        <div class="label">所在地:</div>
        {{ `${serviceDetail?.province}  ${serviceDetail?.city}` }}
      </div>
      <div class="content">
        <div class="label">机构规模:</div>
        {{ serviceDetail?.scale + '人' }}
      </div>
    </div>
    <div class="card">
      <div class="title">机构类型</div>
      <div class="typeList">
        <div class="label">服务类型:</div>
        <div class="type type1" v-for="item in serviceDetail?.serviceCategory">{{ item }}</div>
      </div>
      <div class="typeList">
        <div class="label">重点研究领域:</div>
        <div class="type type2" v-for="item in serviceDetail?.keyResearchField">{{ item }}</div>
      </div>
      <div class="typeList">
        <div class="label">擅长能力:</div>
        <div class="type type3" v-for="item in serviceDetail?.ability">{{ item }}</div>
      </div>
    </div>
    <div class="card">
      <div class="title">机构简介</div>
      <div class="content">
        <div class="label">单位简介:</div>
        {{ serviceDetail?.introduction }}
      </div>
    </div>
  </div>
  </div>
  
</template>

<script setup lang="ts">
import { getServiceOrganizationDetail } from '@/api/enterpeise';
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';

// defineOptions({
//   name: '',
// });

const route = useRoute();
export interface Service {
  createTime: string;
  updateTime: string;
  createBy: string;
  updateBy: string;
  id: number;
  name: string;
  logo: string;
  serviceCategory: string[];
  contact: string;
  province: string;
  city: string;
  scale: number;
  keyResearchField: string[];
  ability: string[];
  introduction: string;
  status: number;
}

const serviceDetail = ref<Service>();
onMounted(() => {
  const id = Number(route.query.id as string);
  getServiceOrganizationDetail(id).then((res: any) => {
    console.log(res);
    if (res.code === 200) {
      serviceDetail.value = res.data;
    }
  });
});
</script>

<style scoped lang="scss">
.flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container {
  background: url(@/assets/foot.jpg) no-repeat;
  background-size: 100% 50%;
  padding: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .infoList {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    .el-avatar {
      border: 10px solid #fff;
    }
    .name {
      margin-top: 20px;
      font-size: 30px;
      font-weight: bold;
    }
    .contact {
      display: flex;
      margin-top: 20px;
      font-size: 18px;
      .label {
        color: #666;
      }
    }
  }
}
.introduction {
  background-color: #f2f3f5;
  box-shadow: 0 0 10px #ddd;
  margin-top: 30px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .card {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    margin: 30px 0;
    box-shadow: 0 0 10px #ddd;
    padding: 20px 40px;
    .title {
      font-size: 25px;
      font-style: italic;
      color: #409eff;
    }
    .content {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 30px;
      .label {
        width: 120px;
        color: #666;
      }
    }
    .typeList {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 10px 0;
      .type {
        height: 30px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 30px;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 14px;
      }
      .type1 {
        background-color: #e6a23c;
      }
      .type2 {
        background-color: #409eff;
      }
      .type3 {
        background-color: #67c23a;
      }
      .label {
        width: 120px;
        color: #666;
      }
    }
    // .intro {
    //   width: 100%;
    //   display: flex;
    //   align-items: center;
    //   margin-top: 30px;
    //   .label {
    //     width: 120px;
    //     color: #666;
    //   }
    // }
  }
}
</style>
